<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一体化作战平台 - 需求看板</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Tailwind CSS 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E40AF',
                        secondary: '#f7fafc',
                        success: '#38a169',
                        warning: '#d69e2e',
                        danger: '#e53e3e',
                        info: '#3182ce',
                        'border-color': '#e2e8f0',
                        'text-primary': '#2d3748',
                        'text-secondary': '#718096'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }
            .badge-priority-high {
                @apply bg-red-100 text-red-800 text-xs px-2 py-0.5 rounded-full;
            }
            .badge-priority-medium {
                @apply bg-yellow-100 text-yellow-800 text-xs px-2 py-0.5 rounded-full;
            }
            .badge-priority-low {
                @apply bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full;
            }
            .badge-status-progress {
                @apply bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full;
            }
            .badge-status-blocked {
                @apply bg-red-100 text-red-800 text-xs px-2 py-0.5 rounded-full;
            }
            .badge-status-completed {
                @apply bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded-full;
            }
            .badge-status-pending {
                @apply bg-gray-100 text-gray-800 text-xs px-2 py-0.5 rounded-full;
            }
            .badge-status-overdue {
                @apply bg-red-100 text-red-800 text-xs px-2 py-0.5 rounded-full;
            }
        }
    </style>
    <style>
        /* 基础样式 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }
        /* 任务卡片悬停效果 */
        .task-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        /* 平滑过渡效果 */
        .task-card {
            transition: all 0.2s ease;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-primary text-white shadow-md">
        <div class="container mx-auto px-4 py-2 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <div class="bg-white rounded-full p-1 mr-2">
                    <i class="fa fa-shield text-primary"></i>
                </div>
                <h1 class="text-lg font-bold">一体化作战平台</h1>
            </div>
            <div class="flex items-center space-x-6">
                <div class="relative">
                    <button class="text-white hover:text-blue-200 relative">
                        <i class="fa fa-bell text-lg"></i>
                        <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-4 h-4 flex items-center justify-center rounded-full">2</span>
                    </button>
                </div>
                <div class="relative">
                    <button class="text-white hover:text-blue-200 relative">
                        <i class="fa fa-envelope text-lg"></i>
                        <span class="absolute -top-1 -right-1 bg-green-500 text-white text-xs w-4 h-4 flex items-center justify-center rounded-full">1</span>
                    </button>
                </div>
                <div class="flex items-center">
                    <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-blue-300">
                    <span class="ml-2 hidden md:inline-block">张三</span>
                    <i class="fa fa-angle-down ml-1 text-xs"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- 二级导航 -->
    <div class="bg-white border-b border-border-color py-2 px-4">
        <div class="container mx-auto">
            <div class="flex items-center space-x-2">
                <a href="#" class="text-gray-600 hover:text-primary text-sm">首页</a>
                <span class="text-gray-400">></span>
                <span class="text-primary font-medium text-sm">团队看板</span>
                <div class="ml-auto flex items-center space-x-3">
                    <div class="hidden md:flex items-center space-x-4">
                    </div>
                    <button class="hidden md:flex items-center space-x-1 text-sm text-gray-500">
                        <i class="fa fa-refresh"></i>
                        <span>刷新</span>
                    </button>

                </div>
            </div>
        </div>
    </div>

    <!-- 筛选区域 -->
    <div class="bg-white border-b border-border-color py-3 px-4">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row items-start md:items-center space-y-3 md:space-y-0 md:space-x-4">
                <div class="flex flex-wrap items-center gap-3">
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">来源</label>
                        <select class="border border-gray-300 rounded px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                            <option>全部</option>
                            <option>产品需求</option>
                            <option>技术优化</option>
                            <option>客户反馈</option>
                            <option>缺陷修复</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">负责人</label>
                        <select class="border border-gray-300 rounded px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                            <option>全部</option>
                            <option>张三</option>
                            <option>李四</option>
                            <option>王五</option>
                            <option>赵六</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs text-gray-500 mb-1">类型</label>
                        <select class="border border-gray-300 rounded px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                            <option>全部</option>
                            <option>功能</option>
                            <option>性能</option>
                            <option>安全</option>
                            <option>文档</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">优先级</label>
                        <select class="border border-gray-300 rounded px-2 py-1 text-sm w-32 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                            <option>全部</option>
                            <option>高</option>
                            <option>中</option>
                            <option>低</option>
                        </select>
                    </div>
                </div>
                <div class="ml-auto flex items-center space-x-2">
                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm">
                        <i class="fa fa-filter mr-1"></i> 筛选
                    </button>
                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm">
                        <i class="fa fa-sliders mr-1"></i> 排序
                    </button>
                    <div class="relative">
                        <input type="text" placeholder="搜索需求ID或标题" class="border border-gray-300 rounded px-3 py-1 text-sm pl-8 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 看板主体内容 -->
    <main class="flex-1 p-4 overflow-x-auto">
        <div class="container mx-auto min-w-[1200px]">
            <!-- 看板表格 -->
            <div class="grid grid-cols-5 gap-4 min-h-[600px]">
                <!-- 业务需求列 -->
                <div class="bg-white rounded-lg border border-border-color overflow-hidden">
                    <div class="bg-gray-50 border-b border-border-color px-4 py-3 flex items-center justify-between">
                        <h2 class="font-medium flex items-center">
                            <span>业务需求</span>
                            <span class="ml-2 bg-gray-200 text-gray-700 text-xs px-1.5 py-0.5 rounded-full">1</span>
                        </h2>
                        <button class="text-gray-400 hover:text-gray-600">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div class="p-3 space-y-3 max-h-[calc(100vh-300px)] overflow-y-auto">
                        <!-- 业务需求卡片1 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">用户管理系统重构</h3>
                                <span class="badge-status-progress">进行中</span>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: RE_0001_01</span>
                                    <span>提出人: 张三</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-high">优先级: 高</span>
                                    <span>2024-07-15</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-3 line-clamp-2">
                                重构现有用户管理系统，优化性能并增加新功能，包括用户权限精细化控制、多因素认证等。
                            </p>
                            <div class="text-xs text-text-secondary mb-1">
                                提出日期: 2024-07-15
                            </div>
                            <div class="text-xs text-text-secondary mb-2">
                                期望上线日期: 2024-08-30
                            </div>
                            <div class="flex justify-between items-center">
                                <div class="w-full bg-gray-200 rounded-full h-1.5 mr-2">
                                    <div class="bg-green-500 h-1.5 rounded-full" style="width: 30%"></div>
                                </div>
                                <span class="text-xs text-text-secondary whitespace-nowrap">30%</span>
                            </div>
                            <div class="text-xs text-text-secondary mt-1">
                                3/10 任务完成
                            </div>
                            <!-- 新建任务按钮 -->
                            <button class="w-full mt-3 bg-primary text-white py-2 px-4 rounded-lg text-sm hover:bg-primary/90 flex items-center justify-center">
                                <i class="fa fa-plus mr-1"></i> 新建任务
                            </button>
                        </div>


                    </div>
                </div>

                <!-- 待开始列 -->
                <div class="bg-white rounded-lg border border-border-color overflow-hidden">
                    <div class="bg-gray-50 border-b border-border-color px-4 py-3 flex items-center justify-between">
                        <h2 class="font-medium flex items-center">
                            <span>待开始</span>
                            <span class="ml-2 bg-gray-200 text-gray-700 text-xs px-1.5 py-0.5 rounded-full">4</span>
                        </h2>
                        <button class="text-gray-400 hover:text-gray-600">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div class="p-3 space-y-3 max-h-[calc(100vh-300px)] overflow-y-auto">
                        <!-- 任务卡片1 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">自动生成</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">需求总体分析</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-051</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-high">优先级: 高</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                        
                            </p>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-15
                            </div>
                        </div>

                        <!-- 任务卡片2 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">手动创建</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">业务架构设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-052</span>
                                    <span>负责人: 刘一</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-medium">优先级: 中</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                              
                            </p>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-20
                            </div>
                        </div>

                        <!-- 任务卡片3 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">自动生成</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">解决方案评审</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-053</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-low">优先级: 低</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                                 
                            </p>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-25
                            </div>
                        </div>
                        
                        <!-- 任务卡片4 - 编码开发 -->
                        <div id="coding-task-card" class="border border-border-color rounded-lg p-3 bg-white task-card relative cursor-pointer hover:border-primary">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">手动创建</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">编码开发</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-999</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-medium">优先级: 中</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                                实现编码开发自动化，代码提交自动触发代码扫描、构建、部署、测试的自动化流程。
                            </p>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2026-08-30
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 进行中列 -->
                <div class="bg-white rounded-lg border border-border-color overflow-hidden">
                    <div class="bg-gray-50 border-b border-border-color px-4 py-3 flex items-center justify-between">
                        <h2 class="font-medium flex items-center">
                            <span>进行中</span>
                            <span class="ml-2 bg-gray-200 text-gray-700 text-xs px-1.5 py-0.5 rounded-full">2</span>
                        </h2>
                        <button class="text-gray-400 hover:text-gray-600">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div class="p-3 space-y-3 max-h-[calc(100vh-300px)] overflow-y-auto">
                        <!-- 任务卡片1 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">手动创建</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">测试策略设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-054</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-high">优先级: 高</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                                开发用户登录功能，包括密码验证、记住密码、忘记密码等功能，并确保安全性。
                            </p>
                            <div class="text-xs text-text-secondary mb-1">
                                进度: 75%
                            </div>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-10
                            </div>
                        </div>

                        <!-- 任务卡片2 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">手动创建</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">产品模型设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-055</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-medium">优先级: 中</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                          
                            </p>
                            <div class="text-xs text-text-secondary mb-1">
                                进度: 30%
                            </div>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-12
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 阻塞中列 -->
                <div class="bg-white rounded-lg border border-border-color overflow-hidden">
                    <div class="bg-gray-50 border-b border-border-color px-4 py-3 flex items-center justify-between">
                        <h2 class="font-medium flex items-center">
                            <span>阻塞中</span>
                            <span class="ml-2 bg-gray-200 text-gray-700 text-xs px-1.5 py-0.5 rounded-full">2</span>
                        </h2>
                        <button class="text-gray-400 hover:text-gray-600">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div class="p-3 space-y-3 max-h-[calc(100vh-300px)] overflow-y-auto">
                        <!-- 任务卡片1 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">自动生成</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">技术架构设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-056</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-high">优先级: 高</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                               
                            </p>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-05
                            </div>
                        </div>

                        <!-- 任务卡片2 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">自动生成</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">安全架构设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-057</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-medium">优先级: 中</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                               
                            </p>
                            <div class="text-xs text-text-secondary">
                                截止日期: 2024-08-05
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 已完成列 -->
                <div class="bg-white rounded-lg border border-border-color overflow-hidden">
                    <div class="bg-gray-50 border-b border-border-color px-4 py-3 flex items-center justify-between">
                        <h2 class="font-medium flex items-center">
                            <span>已完成</span>
                            <span class="ml-2 bg-gray-200 text-gray-700 text-xs px-1.5 py-0.5 rounded-full">3</span>
                        </h2>
                        <button class="text-gray-400 hover:text-gray-600">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div class="p-3 space-y-3 max-h-[calc(100vh-300px)] overflow-y-auto">
                        <!-- 任务卡片1 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">自动生成</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">业务架构设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-048</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-high">优先级: 高</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                               
                            </p>
                            <div class="text-xs text-success">
                                <i class="fa fa-check-circle mr-1"></i> 已完成
                            </div>
                        </div>

                        <!-- 任务卡片2 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">自动生成</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">系统架构设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-049</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-medium">优先级: 中</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                            
                            </p>
                            <div class="text-xs text-success">
                                <i class="fa fa-check-circle mr-1"></i> 已完成
                            </div>
                        </div>

                        <!-- 任务卡片3 -->
                        <div class="border border-border-color rounded-lg p-3 bg-white task-card relative">
                            <div class="absolute top-3 right-3">
                                <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">自动创建</span>
                            </div>
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="font-medium text-text-primary">产品模型设计</h3>
                            </div>
                            <div class="text-sm text-text-secondary mb-3">
                                <div class="flex justify-between mb-1">
                                    <span>ID: TASK-2024-050</span>
                                    <span>负责人: 王五</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="badge-priority-low">优先级: 低</span>
                                </div>
                            </div>
                            <p class="text-sm text-text-primary mb-2 line-clamp-2">
                               
                            </p>
                            <div class="text-xs text-success">
                                <i class="fa fa-check-circle mr-1"></i> 已完成
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-border-color py-2 px-4 text-center text-xs text-text-secondary">
    </footer>

    <!-- JavaScript -->
    <script>
        // 搜索功能
        const searchInput = document.querySelector('input[placeholder="搜索需求ID或标题"]');
        if (searchInput) {
            searchInput.addEventListener('input', (e) => {
                const searchTerm = e.target.value.toLowerCase();
                console.log('Searching for:', searchTerm);
                // 这里可以添加搜索过滤逻辑
            });
        }

        // 筛选条件变更
        document.querySelectorAll('select').forEach(select => {
            select.addEventListener('change', (e) => {
                console.log('Filter changed:', e.target.previousElementSibling.textContent, e.target.value);
                // 这里可以添加筛选逻辑
            });
        });

        // 确保DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 任务详情弹窗功能
            const taskCards = document.querySelectorAll('.task-card');
            const taskModal = document.getElementById('task-detail-modal');
            const closeModal = document.getElementById('close-modal');
            const modalOverlay = document.getElementById('modal-overlay');

            // 关闭弹窗函数
            function hideModal() {
                if (taskModal) taskModal.classList.add('hidden');
                if (modalOverlay) modalOverlay.classList.add('hidden');
                document.body.style.overflow = 'auto'; // 恢复背景滚动
            }

            // 点击任务卡片显示弹窗
            if (taskCards.length > 0 && taskModal && modalOverlay) {
                taskCards.forEach(card => {
                    card.addEventListener('click', (e) => {
                        // 阻止新建任务按钮的冒泡
                        if (e.target.closest('button') && e.target.closest('button').textContent.includes('新建任务')) {
                            return;
                        }
                        
                        // 获取任务信息
                        const taskTitle = card.querySelector('h3')?.textContent || '任务详情';
                        const taskIdElement = card.querySelector('.text-sm.text-text-secondary .flex.justify-between span:first-child');
                        const taskOwnerElement = card.querySelector('.text-sm.text-text-secondary .flex.justify-between span:last-child');
                        const taskPriorityElement = card.querySelector('.badge-priority-high, .badge-priority-medium, .badge-priority-low');
                        const taskDeadlineElement = card.querySelector('.text-xs.text-text-secondary:last-child');
                        // const taskProgressElement = card.querySelector('.bg-gray-200.rounded-full.h-1.5 + span');
                        
                        const taskId = taskIdElement ? taskIdElement.textContent : 'ID: 未知';
                        const taskOwner = taskOwnerElement ? taskOwnerElement.textContent : '负责人: 未知';
                        const taskPriority = taskPriorityElement ? taskPriorityElement.textContent : '优先级: 未知';
                        const taskDeadline = taskDeadlineElement ? taskDeadlineElement.textContent : '截止日期: 未知';
                        // const taskProgress = taskProgressElement ? taskProgressElement.textContent : '0%';
                        
                        // 设置弹窗内容
                        const modalIdElement = document.getElementById('modal-task-id');
                        const modalOwnerElement = document.getElementById('modal-task-owner');
                        const modalPriorityElement = document.getElementById('modal-task-priority');
                        const modalDeadlineElement = document.getElementById('modal-task-deadline');
                        
                        // 保留固定标题"业务架构设计"，不再设置为任务名称
                        if (modalIdElement) modalIdElement.textContent = taskId;
                        if (modalOwnerElement) modalOwnerElement.textContent = taskOwner;
                        if (modalPriorityElement) modalPriorityElement.textContent = taskPriority;
                        if (modalDeadlineElement) modalDeadlineElement.textContent = taskDeadline;
                        
                        // 根据任务进度更新进展条
                        const progressPercentage = parseInt(100) || 0;
                        const progressBar = document.querySelector('.progress-node.active .progress-bar');
                        if (progressBar) {
                            progressBar.style.width = progressPercentage + '%';
                        }
                        
                        // 显示弹窗
                        taskModal.classList.remove('hidden');
                        modalOverlay.classList.remove('hidden');
                        document.body.style.overflow = 'hidden'; // 阻止背景滚动
                    });
                });
            }

            // 关闭弹窗事件监听
            if (closeModal) {
                closeModal.addEventListener('click', hideModal);
            }

            if (modalOverlay) {
                modalOverlay.addEventListener('click', hideModal);
            }

            // 按ESC键关闭弹窗
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && taskModal && !taskModal.classList.contains('hidden')) {
                    hideModal();
                }
            });
        });
    </script>

    <!-- 任务详情弹窗 -->
    <div id="modal-overlay" class="fixed inset-0 bg-black/50 z-40 hidden"></div>
    <div id="task-detail-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col">
            <!-- 弹窗头部 -->
            <div class="bg-primary text-white px-6 py-4 flex items-center justify-between">
                <h2 class="text-xl font-bold" id="modal-task-title">业务架构设计</h2>
                <button id="close-modal" class="text-white hover:text-gray-200 focus:outline-none">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- 任务自动化进展 -->
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium mb-3">任务自动化进展</h3>
                <div class="relative">
                    <!-- 进展条背景 -->
                    <div class="absolute top-1/2 left-0 w-full h-0.5 bg-gray-200 -translate-y-1/2"></div>
                    
                    <!-- 节点和连接线 -->
                    <div class="flex justify-between relative z-10">
                        <!-- 需求分析节点 -->
                        <div class="flex flex-col items-center">
                            <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center border-2 border-primary">
                                <i class="fa fa-search"></i>
                            </div>
                            <span class="text-xs mt-2 text-primary font-medium">高阶流程模型</span>
                        </div>
                        
                        <!-- 方案设计节点 -->
                        <div class="flex flex-col items-center">
                            <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center border-2 border-primary">
                                <i class="fa fa-pencil"></i>
                            </div>
                            <span class="text-xs mt-2 text-primary font-medium">活动模型</span>
                        </div>
                        
                        <!-- 开发实施节点 -->
                        <div class="flex flex-col items-center progress-node active">
                            <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center border-2 border-primary">
                                <i class="fa fa-code"></i>
                            </div>
                            <span class="text-xs mt-2 text-primary font-medium">业务组件模型</span>
                            <!-- 进度条 -->
                            <div class="absolute top-1/2 left-0 w-full h-0.5 bg-primary -translate-y-1/2 progress-bar" style="width: 70%"></div>
                        </div>
                        
                        <!-- 测试验证节点 -->
                        <div class="flex flex-col items-center">
                            <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-700 flex items-center justify-center border-2 border-gray-300">
                                <i class="fa fa-check"></i>
                            </div>
                            <span class="text-xs mt-2 text-gray-500">任务步骤模型</span>
                        </div>
                        
                        <!-- 上线部署节点 -->
                        <div class="flex flex-col items-center">
                            <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-700 flex items-center justify-center border-2 border-gray-300">
                                <i class="fa fa-rocket"></i>
                            </div>
                            <span class="text-xs mt-2 text-gray-500">模型验证</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 任务详情内容 -->
            <div class="flex-1 p-6 overflow-y-auto">
                <div class="mb-4">
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <p class="text-sm text-gray-500 mb-1">任务ID</p>
                            <p class="text-sm font-medium" id="modal-task-id">ID: RE_0001_01</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">负责人</p>
                            <p class="text-sm font-medium" id="modal-task-owner">负责人: 张三</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">优先级</p>
                            <p class="text-sm font-medium" id="modal-task-priority">优先级: 高</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">截止日期</p>
                            <p class="text-sm font-medium" id="modal-task-deadline">截止日期: 2024-08-30</p>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <p class="text-sm text-gray-500 mb-1">任务描述</p>
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="text-sm">重构现有用户管理系统，优化性能并增加新功能，包括用户权限精细化控制、多因素认证等。</p>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <p class="text-sm text-gray-500 mb-1">任务历史</p>
                        <div class="space-y-2">
                            <div class="flex items-start">
                                <div class="w-2 h-2 rounded-full bg-green-500 mt-1.5 mr-2"></div>
                                <div class="text-sm">
                                    <span class="font-medium">张三</span> 更新了任务状态为 <span class="text-green-600">进行中</span> - 2024-08-01 10:30
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="w-2 h-2 rounded-full bg-blue-500 mt-1.5 mr-2"></div>
                                <div class="text-sm">
                                    <span class="font-medium">李四</span> 分配任务给 <span class="text-blue-600">张三</span> - 2024-07-30 15:45
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部按钮 -->
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                <button class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
                    取消
                </button>
                <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90">
                    确认
                </button>
            </div>
        </div>
    </div>
    
    <!-- 编码开发自动化流程模态框 -->
    <div id="coding-automation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <!-- 模态框头部 -->
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-text-primary">编码开发自动化</h3>
                <button id="close-coding-modal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times text-lg"></i>
                </button>
            </div>
            
            <!-- 任务基本信息 -->
            <div class="px-6 py-4">
                <div class="bg-gray-50 rounded-lg p-4 mb-6">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-3">
                        <h4 class="text-lg font-medium text-text-primary">编码开发</h4>
                        <div class="flex items-center space-x-2 mt-2 md:mt-0">
                            <span class="bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-full">手动创建</span>
                            <span class="badge-priority-medium">优先级: 中</span>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <p class="text-sm text-gray-500 mb-1">任务ID</p>
                            <p class="text-sm">TASK-2024-999</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">负责人</p>
                            <p class="text-sm">王五</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">截止日期</p>
                            <p class="text-sm">2026-08-30</p>
                        </div>
                    </div>
                </div>
                
                <!-- 自动化流程进度 -->
                <div class="mb-6">
                    <h4 class="text-base font-medium text-text-primary mb-4">自动化流程进度</h4>
                    
                    <!-- 水平流程时间线 -->
                    <div class="relative">
                        <div class="flex flex-wrap justify-between items-center">
                            <!-- 水平连接线 -->
                            <div class="absolute top-3 left-0 right-0 h-0.5 bg-gray-200 -z-10"></div>
                            
                            <!-- 流程步骤1: 开始 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-success flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-check text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">开始</h5>
                                    <span class="text-xs text-success">已完成</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-10</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤2: 质量扫描-静态规则集合 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-success flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-check text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">质量扫描-静态规则集合</h5>
                                    <span class="text-xs text-success">已完成</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-10</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤3: 质量扫描-代码安全 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-success flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-check text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">质量扫描-代码安全</h5>
                                    <span class="text-xs text-success">已完成</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-10</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤4: 质量扫描-开源组件漏洞 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-success flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-check text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">质量扫描-开源组件漏洞</h5>
                                    <span class="text-xs text-success">已完成</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-10</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤5: 单元测试 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-success flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-check text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">单元测试</h5>
                                    <span class="text-xs text-success">已完成</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-10</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤6: 构建 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-success flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-check text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">构建</h5>
                                    <span class="text-xs text-success">已完成</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-11</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤7: 制品晋级 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-success flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-check text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">制品晋级</h5>
                                    <span class="text-xs text-success">已完成</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-11</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤8: 测试环境部署 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-primary flex items-center justify-center text-white mb-1">
                                    <i class="fa fa-spinner fa-spin text-xs"></i>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-text-primary text-xs mb-0.5">测试环境部署</h5>
                                    <span class="text-xs text-primary">进行中</span>
                                    <p class="text-xs text-gray-500 mt-0.5">2024-08-11</p>
                                    <div class="mt-1 w-full bg-gray-200 rounded-full h-1.5">
                                        <div class="bg-primary h-1.5 rounded-full" style="width: 75%"></div>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-0.5">75%</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤9: 自动化测试 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center text-white mb-1">
                                    <span class="text-xs">9</span>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-gray-400 text-xs mb-0.5">自动化测试</h5>
                                    <span class="text-xs text-gray-400">未开始</span>
                                    <p class="text-xs text-gray-400 mt-0.5">待部署完成</p>
                                </div>
                            </div>
                            
                            <!-- 流程步骤10: 结束 -->
                            <div class="flex flex-col items-center flex-shrink-0 w-1/10 mb-4">
                                <div class="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center text-white mb-1">
                                    <span class="text-xs">10</span>
                                </div>
                                <div class="text-center">
                                    <h5 class="font-medium text-gray-400 text-xs mb-0.5">结束</h5>
                                    <span class="text-xs text-gray-400">未开始</span>
                                    <p class="text-xs text-gray-400 mt-0.5">待测试完成</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 详细日志 -->
                <div class="mb-4">
                    <h4 class="text-base font-medium text-text-primary mb-3">部署日志</h4>
                    <div class="bg-gray-50 rounded-lg p-3 max-h-40 overflow-y-auto text-sm text-gray-600 font-mono">
                        <p>[2024-08-11 14:00:00] 开始部署制品到测试环境...</p>
                        <p>[2024-08-11 14:01:30] 上传制品文件成功</p>
                        <p>[2024-08-11 14:03:45] 配置环境变量</p>
                        <p>[2024-08-11 14:05:20] 启动服务容器</p>
                        <p>[2024-08-11 14:07:10] 服务健康检查中...</p>
                        <p>[2024-08-11 14:08:30] 部署进度: 75% - 正在配置网络...</p>
                    </div>
                </div>
            </div>
            
            <!-- 底部按钮 -->
            <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
                <button id="close-coding-modal-btn" class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
                    关闭
                </button>
            </div>
        </div>
    </div>
    
    <!-- JavaScript -->
    <script>
        // 为编码开发任务添加点击事件
        document.addEventListener('DOMContentLoaded', function() {
            const codingTaskCard = document.getElementById('coding-task-card');
            const codingModal = document.getElementById('coding-automation-modal');
            const closeModalBtn1 = document.getElementById('close-coding-modal');
            const closeModalBtn2 = document.getElementById('close-coding-modal-btn');
            
            // 打开模态框
            if (codingTaskCard && codingModal) {
                codingTaskCard.addEventListener('click', function() {
                    codingModal.classList.remove('hidden');
                    document.body.style.overflow = 'hidden';
                });
            }
            
            // 关闭模态框
            function closeModal() {
                if (codingModal) {
                    codingModal.classList.add('hidden');
                    document.body.style.overflow = '';
                }
            }
            
            if (closeModalBtn1) closeModalBtn1.addEventListener('click', closeModal);
            if (closeModalBtn2) closeModalBtn2.addEventListener('click', closeModal);
            
            // 点击模态框背景关闭
            if (codingModal) {
                codingModal.addEventListener('click', function(e) {
                    if (e.target === codingModal) {
                        closeModal();
                    }
                });
            }
            
            // ESC键关闭模态框
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    closeModal();
                }
            });
        });
    </script>
</body>
</html>